﻿<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet/less" href="upload.less"/>
<script type="text/javascript" src="lib/less-1.7.1.min.js"></script>
</head>
<body>
	<div id="uploadqueue"></div>
	<button id="upload">上传</button>
	<button id="uploadall">全部上传</button>
	<button id="form">普通表单</button>
	<div id="process"></div>
	<img src="1.png"/>
	<div id="time"></div>
	<script src="lib/jquery-2.0.2.min.js" type="text/javascript"></script>
	<script>
		$(document).ready(function() {
			if("WebSocket" in window){
				
			}
		});
		
		function connect(){
		    try{
				var socket;
				var host = "ws://localhost:8000/socket/server/startDaemon.php";
			    var socket = new WebSocket(host);

		        message(socket.readyState);
		        socket.onopen = function(){
		        	message(socket.readyState);
		        }

		        socket.onmessage = function(msg){
					message(msg.data);
		        }

		        socket.onclose = function(){
					message(socket.readyState);
		        }			
		    } catch(exception){
		   		 message(exception);
		    }
		}
	</script>
	<script>
		$("#form").click(function(){
			$.ajax({
				url : "upload",
				type:"post",
				data:{
					"username":"梁威",
					"password":"我爱你",
					"lover":"卓琼羽"
				},
				success:function(data){
					console.log(data);
				}
			});
		});	
	
	
		function formatFileSize(size){
			if(size > 1024 * 1024 * 1024){
				return (Math.round(size * 100 / (1024 * 1024 * 1024)) / 100) + 'GB';
			} else if (size > 1024 * 1024) {
				return (Math.round(size * 100 / (1024 * 1024)) / 100) + 'MB';
			} else if(size > 1024){
				return (Math.round(size * 100 / 1024) / 100)+ 'KB';
			} else {
				return size + "B";
			}
		}
		
		function getTime(time){
			var days=Math.floor(time/(24*3600*1000))
			//计算出小时数
			
			var leave1=time%(24*3600*1000)    //计算天数后剩余的毫秒数
			var hours=Math.floor(leave1/(3600*1000))
			//计算相差分钟数
			var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
			var minutes=Math.floor(leave2/(60*1000))
			//计算相差秒数
			var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
			var seconds=Math.round(leave3/1000)
			
			return days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒";
		}
		
		
		/**/
		$("#uploadqueue").delegate(".start", "click", function(){
			var item = $(this).parents(".file_item");
			var file = item.data("file");
			
			var time = (new Date()).getTime();
			if(file[0].files.length > 0){
				var fd = new FormData();
				var proc = item.children(".process");
				
				fd.append("file", file[0].files[0]);
				fd.append("username","梁威");
				fd.append("password","i love you");
				fd.append("lover","卓琼羽");
				
				var xhr = new XMLHttpRequest();
				xhr.upload.addEventListener("progress", function(e){
					proc.css("width", (e.loaded * 100 / e.total)+"%");
				}, false);
				
				xhr.addEventListener("load", function(e){
					$("#time").html(getTime((new Date()).getTime() - time));
				}, false);
				
				xhr.addEventListener("error", function(e){
					
				}, false);
				
				xhr.addEventListener("abort", function(e){
					
				}, false);
				
				xhr.open("POST", "upload?name=liangwei");
				xhr.send(fd);
			}
		}).delegate(".browse", "click", function(){
			var item = $(this).parents(".file_item");
			var file = item.data("file");
			file.click();
		});
		
		$("#uploadall").click(function(){
			var fileItem = $("#uploadqueue").children(".file_item");
			
			var fd = new FormData();
			var proc = $("#process");
			
			fd.append("username","梁威");
			fd.append("password","i love you");
			fd.append("null", null);
			
			$.each(fileItem, function(i, item){
				fd.append("file", $(item).data("file")[0].files[0]);
			});
			
			
			var xhr = new XMLHttpRequest();
			xhr.upload.addEventListener("progress", function(e){
				proc.html(e.loaded);
			}, false);
			
			xhr.addEventListener("load", function(e){
				
			}, false);
			
			xhr.addEventListener("error", function(e){
				
			}, false);
			
			xhr.addEventListener("abort", function(e){
				
			}, false);
			
			xhr.open("POST", "upload?name=liangwei");
			xhr.send(fd);
			
			
			
		});
		
		/**/
		$("#upload").click(function() {
			var input = $("<input type='file'/>"),
				item = $('<div class="file_item">\
						<div class="process"></div>\
						<div class="upload_toolbar">\
							<span class="browse"></span>\
							<span class="start"></span>\
						</div>\
						<div class="file_info">\
							<span class="filename"></span>\
							<span class="filesize"></span>\
						</div>\
					</div>').data("file", input);

			item.append(input);
			$("#uploadqueue").append(item);

			input.click();
			input.change(function() {
				var file = (this.files)[0];
				var fileSize = formatFileSize(file.size);
				
				item.find(".progress").css("width", 0);
				item.find(".filename").html(file.name).attr("title", file.name);
				item.find(".filesize").html(fileSize).attr("title", fileSize);
			});
		});
	</script>
</body>
</html>